<template>
  <div>
    <div class="org-header">
      <div class="org-avatar">
        <img src="../../assets/images/student/tutor-avatar.jpg" class="img-org-avatar"/>
      </div>
      <div class="org-intro">
        <div class="org-intro-title">北京大学</div>
        <div class="org-intro-detail">北京大学创办于1898年，初名京师大学堂，是中国第一所国立综合性大学，也是当时中国最高教育行政机关。辛亥革命后，于1912年改为现名。 学校为教育部直属全国重点大学，国家“211工程”、“985工程”建设大学、C9联盟，以及东亚研究型大学协会、国际研究型大学联盟、环太平洋大学联盟、东亚四大学论坛的重要成员。</div>
      </div>
    </div>
    <div class="org-class">
      <div class="org-class-title">课程</div>
      <div class="org-class-type">
        <Button type="info">直播课程</Button>
        <Button type="success">录播课程</Button>
      </div>
      <div class="org-class-items">
        <Row :gutter="16">
          <i-col span="4" style="padding-right: 15px;padding-left: 15px;">
            <a href="" class="course-card-container">
              <div class="course-card-top">
                <Badge text="NEW">
                  <img class="course-banner" src="../../assets/images/course02.jpg">
                </Badge>
              </div>
              <div class="course-title">Vue全家桶+SSR+Koa2全栈开发美团网</div>
              <div>
                <Icon type="md-person" /> 555
                <Rate allow-half disabled v-model="valueHalf" style="font-size: 14px;"/>
                <span class="course-price">免费课程</span>
              </div>
            </a>
          </i-col>
          <i-col span="4" style="padding-right: 15px;padding-left: 15px;">
            <a href="" class="course-card-container">
              <div class="course-card-top">
                <Badge text="NEW">
                  <img class="course-banner" src="../../assets/images/course01.jpg">
                </Badge>
              </div>
              <div class="course-title">Vue全家桶+SSR+Koa2全栈开发美团网</div>
              <div>
                <Icon type="md-person" /> 555
                <Rate allow-half disabled v-model="valueHalf" style="font-size: 14px;"/>
                <span class="course-price">￥555.00</span>
              </div>
            </a>
          </i-col>
          <i-col span="4" style="padding-right: 15px;padding-left: 15px;">
            <a href="" class="course-card-container">
              <div class="course-card-top">
                <Badge text="NEW">
                  <img class="course-banner" src="../../assets/images/course02.jpg">
                </Badge>
              </div>
              <div class="course-title">Vue全家桶</div>
              <div>
                <Icon type="md-person" /> 555
                <Rate allow-half disabled v-model="valueHalf" style="font-size: 14px;"/>
                <span class="course-price">￥555.00</span>
              </div>
            </a>
          </i-col>
          <i-col span="4" style="padding-right: 15px;padding-left: 15px;">
            <a href="" class="course-card-container">
              <div class="course-card-top">
                <Badge text="NEW">
                  <img class="course-banner" src="../../assets/images/course01.jpg">
                </Badge>
              </div>
              <div class="course-title">Vue全家桶+SSR+Koa2全栈开发美团网</div>
              <div>
                <Icon type="md-person" /> 555
                <Rate allow-half disabled v-model="valueHalf" style="font-size: 14px;"/>
                <span class="course-price">￥555.00</span>
              </div>
            </a>
          </i-col>
          <i-col span="4" style="padding-right: 15px;padding-left: 15px;">
            <a href="" class="course-card-container">
              <div class="course-card-top">
                <Badge text="NEW">
                  <img class="course-banner" src="../../assets/images/course02.jpg">
                </Badge>
              </div>
              <div class="course-title">Vue全家桶+SSR+Koa2全栈开发美团网</div>
              <div>
                <Icon type="md-person" /> 555
                <Rate allow-half disabled v-model="valueHalf" style="font-size: 14px;"/>
                <span class="course-price">￥555.00</span>
              </div>
            </a>
          </i-col>
          <i-col span="4" style="padding-right: 15px;padding-left: 15px;">
            <a href="" class="course-card-container">
              <div class="course-card-top">
                <Badge text="NEW">
                  <img class="course-banner" src="../../assets/images/course01.jpg">
                </Badge>
              </div>
              <div class="course-title">Vue全家桶+SSR+Koa2全栈开发美团网</div>
              <div>
                <Icon type="md-person" /> 555
                <Rate allow-half disabled v-model="valueHalf" style="font-size: 14px;"/>
                <span class="course-price">￥555.00</span>
              </div>
            </a>
          </i-col>
          <Page :total="100" style="text-align: center"/>
        </Row>
      </div>
    </div>
    <div class="org-class">
      <div class="org-class-title">教师</div>
      <div class="org-class-type">
        <Button type="info">全部教师</Button>
        <Button type="success">机构名师</Button>
      </div>
      <div class="org-class-items">
        <Row :gutter="16">
          <i-col span="4" style="padding-right: 15px;padding-left: 15px;">
            <a href="" class="course-card-container">
              <div class="course-card-top">
                <Badge text="NEW">
                  <img class="course-banner" src="../../assets/images/course02.jpg">
                </Badge>
              </div>
              <div class="course-title">Vue全家桶+SSR+Koa2全栈开发美团网</div>
              <div>
                <Icon type="md-person" /> 555
                <Rate allow-half disabled v-model="valueHalf" style="font-size: 14px;"/>
                <span class="course-price">免费课程</span>
              </div>
            </a>
          </i-col>
          <i-col span="4" style="padding-right: 15px;padding-left: 15px;">
            <a href="" class="course-card-container">
              <div class="course-card-top">
                <Badge text="NEW">
                  <img class="course-banner" src="../../assets/images/course01.jpg">
                </Badge>
              </div>
              <div class="course-title">Vue全家桶+SSR+Koa2全栈开发美团网</div>
              <div>
                <Icon type="md-person" /> 555
                <Rate allow-half disabled v-model="valueHalf" style="font-size: 14px;"/>
                <span class="course-price">￥555.00</span>
              </div>
            </a>
          </i-col>
          <i-col span="4" style="padding-right: 15px;padding-left: 15px;">
            <a href="" class="course-card-container">
              <div class="course-card-top">
                <Badge text="NEW">
                  <img class="course-banner" src="../../assets/images/course02.jpg">
                </Badge>
              </div>
              <div class="course-title">Vue全家桶</div>
              <div>
                <Icon type="md-person" /> 555
                <Rate allow-half disabled v-model="valueHalf" style="font-size: 14px;"/>
                <span class="course-price">￥555.00</span>
              </div>
            </a>
          </i-col>
          <i-col span="4" style="padding-right: 15px;padding-left: 15px;">
            <a href="" class="course-card-container">
              <div class="course-card-top">
                <Badge text="NEW">
                  <img class="course-banner" src="../../assets/images/course01.jpg">
                </Badge>
              </div>
              <div class="course-title">Vue全家桶+SSR+Koa2全栈开发美团网</div>
              <div>
                <Icon type="md-person" /> 555
                <Rate allow-half disabled v-model="valueHalf" style="font-size: 14px;"/>
                <span class="course-price">￥555.00</span>
              </div>
            </a>
          </i-col>
          <i-col span="4" style="padding-right: 15px;padding-left: 15px;">
            <a href="" class="course-card-container">
              <div class="course-card-top">
                <Badge text="NEW">
                  <img class="course-banner" src="../../assets/images/course02.jpg">
                </Badge>
              </div>
              <div class="course-title">Vue全家桶+SSR+Koa2全栈开发美团网</div>
              <div>
                <Icon type="md-person" /> 555
                <Rate allow-half disabled v-model="valueHalf" style="font-size: 14px;"/>
                <span class="course-price">￥555.00</span>
              </div>
            </a>
          </i-col>
          <i-col span="4" style="padding-right: 15px;padding-left: 15px;">
            <a href="" class="course-card-container">
              <div class="course-card-top">
                <Badge text="NEW">
                  <img class="course-banner" src="../../assets/images/course01.jpg">
                </Badge>
              </div>
              <div class="course-title">Vue全家桶+SSR+Koa2全栈开发美团网</div>
              <div>
                <Icon type="md-person" /> 555
                <Rate allow-half disabled v-model="valueHalf" style="font-size: 14px;"/>
                <span class="course-price">￥555.00</span>
              </div>
            </a>
          </i-col>
          <Page :total="100" style="text-align: center;margin-top: 40px;"/>
        </Row>
      </div>
    </div>
    <div class="news-notification">
      <Row>
        <i-col span="12" style="padding-right: 15px;">
          <div class="news-header">机构新闻</div>
        </i-col>
        <i-col span="12" style="padding-left: 15px;">
          <div class="news-header">机构通知</div>
        </i-col>
      </Row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'index'
}
</script>

<style scoped>
.org-header {
  position: relative;
  height: 240px;
  background: url("../../assets/images/student/class-bg.jpg");
}
.org-avatar {
  position: absolute;
  top: 155px;
  left: 10%;
}
.img-org-avatar {
  width: 164px;
  border-radius: 50%;

}
.org-intro {
  position: absolute;
  top: 250px;
  left: calc(12% + 160px);
}
.org-intro-title {
  font-size: 1.2rem;
}
.org-intro-detail {
  width: 1150px;
}
.org-class {
  padding-left: 10%;
  padding-right: 10%;
  margin-top: 140px;
}
.org-class-title {
  font-size: 1.3rem;
  border-bottom: 1px solid #808695;
}
.org-class-type {
  margin-top: 15px;
}
.course-banner {
  width: 100%;
  height: 100%;
  background-color: #f3f5f7;
  border-radius: 8px;
}
.course-title {
  color: #0f0f0f;
  font-size: 15px;
}
.course-price {
  position: absolute;
  right: 10px;
}
.org-class-items {
  margin-top: 15px;
}
.news-notification {
  padding-left: 10%;
  padding-right: 10%;
  margin-top: 20px;
}
.news-header {
  font-size: 1.3rem;
  border-bottom: 1px solid #808695;
}
</style>
